<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-select v-model="query.operatorId" filterable class="filter-item" placeholder="请选择部署人员">
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.nickName"
            :value="item.id"
          />
        </el-select>
        <rrOperation :crud="crud" />
      </div>

      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table ref="itemTable" :data="props.row.deployRecs" size="small" style="padding-left: 50px;padding-right: 15px;">
              <el-table-column prop="projectName" label="项目" width="250">
                <template slot-scope="scope">
                  <el-button size="mini" type="text">
                    <router-link :to="`/deploy/dpserverdetail?projectId=${scope.row.projectId}`">
                      {{ scope.row.projectName }}
                    </router-link>
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column prop="sourceBranch" label="源代码分支" width="250" />
              <el-table-column prop="targetBranch" label="目标分支" width="250" />
              <el-table-column prop="deployStage" label="部署流程">
                <template slot-scope="scope">
                  <el-steps :active="scope.row.stage" :process-status="processStatus(scope.row.deployStatus)" finish-status="success">
                    <el-step title="配置" />
                    <el-step title="构建" />
                    <el-step title="构建检测" />
                    <el-step title="部署" />
                    <el-step title="健康检测" />
                  </el-steps>
                </template>
              </el-table-column>
              <el-table-column label="查看部署" width="200">
                <template slot-scope="scope">
                  <el-button size="mini" type="text">
                    <router-link :to="'/deploy/proccess?projectId=' + scope.row.projectId + '&deployRecId=' + scope.row.id">
                      查看部署
                    </router-link>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="流程">
          <template slot-scope="scope">
            <el-button size="mini" type="text">
              <router-link :to="'/publish/apply?publishId='+ scope.row.flowId">
                {{ scope.row.title }}
              </router-link>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="env" label="环境">
          <template slot-scope="scope">
            {{ envListMap[`${scope.row.env}`] }}
          </template>
        </el-table-column>
        <el-table-column prop="stage" label="阶段">
          <template slot-scope="scope">
            {{ dict.label.publish_deploy_stage[`${scope.row.stage}`] }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag
              :type="getDeployStatusType(scope.row.status)"
            >
              {{ dict.label.publish_deploy_status[`${scope.row.status}`] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="publishTime" label="部署时间" />
        <el-table-column prop="operatorName" label="部署人姓名" />
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudPublishDeploy from '@/api/publisher/publishDeploy'
import CRUD, { presenter, header, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import global_const from '@/mixins/global_const'
import { mapGetters } from 'vuex'

export default {
  name: 'PublishDeploy',
  components: { pagination, rrOperation },
  mixins: [presenter(), header(), crud(), global_const],
  dicts: ['publish_deploy_stage', 'publish_deploy_status'],
  cruds() {
    return CRUD({ title: '服务审批部署日志表', url: 'api/publishDeploy', idField: 'id', sort: 'id,desc', crudMethod: { ...crudPublishDeploy }, queryOnPresenterCreated: false })
  },
  data() {
    return {
      envListMap: {},
      permission: {
        add: ['admin', 'publishDeploy:add'],
        edit: ['admin', 'publishDeploy:edit'],
        del: ['admin', 'publishDeploy:del']
      },
      rules: {
        flowId: [
          { required: true, message: '流程id不能为空', trigger: 'blur' }
        ],
        env: [
          { required: true, message: '环境不能为空', trigger: 'blur' }
        ],
        publishTime: [
          { required: true, message: '部署时间不能为空', trigger: 'blur' }
        ],
        stage: [
          { required: true, message: '阶段：0:合并分支 1:服务部署 2:分支回滚 3.服务回滚 4.结束不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '状态：0:进行中 1:回滚 2:成功 3.失败不能为空', trigger: 'blur' }
        ],
        operatorId: [
          { required: true, message: '部署人id不能为空', trigger: 'blur' }
        ],
        operatorName: [
          { required: true, message: '部署人姓名不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'flowId', display_name: '流程id' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'envList',
      'userList'
    ])
  },
  created() {
    const query = this.$route.query
    if (query !== undefined || query.flowId !== undefined) {
      this.query.flowId = query.flowId
    }
    this.envListMap = {}
    const _this = this
    this.envList.forEach(item => {
      _this.envListMap[item.value] = item.name
    })
  },
  mounted() {
    this.crud.toQuery()
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    getDeployStatusType(status) {
      if (this.PUBLISH_DEPLOYSTATUS_FAILED === status) {
        return 'danger'
      } else if (this.PUBLISH_DEPLOYSTATUS_SUCCESS === status) {
        return 'success'
      }
      return ''
    }
  }
}
</script>

<style scoped>

</style>
